<template>
  <div id="login">
    <div class="register-container">
      <el-form :model="formdata" :rules="rules" ref="registerForm" label-width="100px" class="register-form">
        <h2 class="title">注册新用户</h2>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formdata.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formdata.password" autocomplete="new-password"></el-input>
          <p :style="{ visibility: passwordStrengthMessage ? 'visible' : 'hidden', color: passwordStrengthColor }">
            {{ passwordStrengthMessage }}
          </p>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input type="password" v-model="formdata.repassword" autocomplete="new-password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegisterView',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.formdata.repassword !== '') {
          this.$refs.registerForm.validateField('repassword');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formdata.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      formdata: {
        username: '',
        password: '',
        repassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        repassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      passwordStrengthMessage: '', // 密码强度提示信息
      passwordStrengthColor: '' // 密码强度提示颜色
    };
  },
  methods: {
    handleRegister() {
      // 获取表单数据
      const username = this.formdata.username;
      const password = this.formdata.password;
      const repassword = this.formdata.repassword;
      // 使用 GET 方法发送请求
      this.axios.get('UsersRegister', {
        params: {
          username,
          password,
          repassword
        }
      })
      .then(response => {
        console.log(response);
        alert('注册成功！');
        this.$router.push('/login');
      })
      .catch(error => {
        console.error(error);
        alert('注册失败！');
      });
    },
    resetForm() {
      this.$refs.registerForm.resetFields();
    }
  },
  watch: {
    'formdata.password': function (password) {
      let strength = 0;

      if (password.length >= 8) strength++;
      if (/\d/.test(password)) strength++;
      if (/[A-Z]/.test(password)) strength++;
      if (/[a-z]/.test(password)) strength++;
      if (/[\W_]/.test(password)) strength++;

      if (strength >= 4) {
        this.passwordStrengthMessage = "密码有效，复杂度：高";
        this.passwordStrengthColor = "#05b92c";
      } else if (strength === 3) {
        this.passwordStrengthMessage = "密码有效，复杂度：中";
        this.passwordStrengthColor = "orange";
      } else if (strength === 2) {
        this.passwordStrengthMessage = "密码有效，复杂度：低，建议添加数字或特殊符号";
        this.passwordStrengthColor = "red";
      } else {
        this.passwordStrengthMessage = "密码无效。密码长度至少为 8 位，并且必须包含一个小写字母、大写字母和一个符号。";
        this.passwordStrengthColor = "red";
      }
    }
  }
};
</script>
  
<style lang ='less'scoped>  
.register-container {  
  max-width: 400px;  
  margin: 50px auto;  
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);  
  border-radius: 8px;  
  background-color: skyblue;
}  
  
.register-form {  
  margin-top: 20px;  
}  
  
.title {  
  text-align: center;  
  margin-bottom: 20px;  
  color: #333
}
#login {
  width: 100%;
  height: 98vh;
  overflow: hidden;
  position: absolute;
  // 背景图片样式
  background-image: url("../assets/img/water.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

</style>